<template>
  <div data-name'newSongSheet'>
    <section style=" margin-bottom: 60px;margin-top:38px;">
      <div id="title"><img :src="titleImg" alt=""></div>
        <ul class="mui-table-view" id="list">
            <li class="mui-table-view-cell mui-media" v-for="(v,i) in msg" :key="i" @click="play(v)">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-right" src="../assets/images/play.png">
                    <div class="mui-media-body" style="text-overflow: ellipsis;">{{v.filename}}
                        <p class="mui-ellipsis" style="font-size:12px;">{{v.remark}}</p>
                    </div>
                </a>
            </li>
        </ul>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "",
      titleImg:'',
    };
  },
  created() {
    console.log("specialid:", this.$route.query.specialid);
    var that = this;
    var formdata = new FormData();
    formdata.append("specialid", that.$route.query.specialid);
    that
      .$http({
        url: "/singleSongSheet",
        method: "post",
        data: formdata
      })
      .then(res => {
        that.msg = res.data.list.list.info;
        that.titleImg = res.data.info.list.imgurl.replace('{size}','400')
        console.log('res.data',res.data);
        console.log(that.msg);
      });
  },
  methods: {
    play(v) {
      var that = this;
      var formdata = new FormData();
      formdata.append("hash", v.hash);
      that
        .$http({
          url: "/SongInfo",
          method: "post",
          data: formdata
        })
        .then(res => {
          that.songInfo = res.data.data;
          console.log("RankingPage: ", res.data);
          this.$store.dispatch("emitHash", res.data.data);
        });
    }
  }
};
</script>
<style scoped>
#title img {
  width: 100%;
  height: 222px;
}

#title {
  position: relative;
  height: 222px;
  left: 0;
  right: 0;
  background-color: #fff;
}

#list,
#list li,
#list li a,
.mui-table-view:before,
.mui-table-view-cell:after,
.mui-table-view:after {
  background-color: transparent;
  border: 0px;
}

#list {
  background-color: transparent;
  padding: 10px;
}

#list li {
  padding-left: 8px;
}

#list li img {
  width: 27px;
  height: 27px;
}
</style>

